<template>
	<view class="coupon-list-packbox font-hanserif-bold" >
		<view v-for="(item, index) in resLists" :key="index" class="coupon-info relative" v-if="commonConfigs && commonConfigs.domainFrontFileLink"
			:style="{ 
				'background-image': tabCurrentIndex === 2 || tabCurrentIndex === 4 ? `url(${commonConfigs.domainFrontFileLink}/files/images/coupons/coupon-end-bg.png)` : `url(${commonConfigs.domainFrontFileLink}/files/images/coupons/coupon-bg.png)` 
			}"
			:class="confirmFlagPopup ? 'coupon-info-popup' : ''">
			<!-- 1可用 2已使用 3已过期 4已赠送 5赠送中 -->
			<image v-if="item.status === 2 &&  (commonConfigs && commonConfigs.domainFrontFileLink)" :src="`${commonConfigs.domainFrontFileLink}/files/images/coupons/icon-ysy.png`" class="info-bg absolute" />
			<image v-if="item.status === 3 && (commonConfigs && commonConfigs.domainFrontFileLink)" :src="`${commonConfigs.domainFrontFileLink}/files/images/coupons/icon-ygq.png`" class="info-bg absolute" />
			<image v-if="item.status === 4 && (commonConfigs && commonConfigs.domainFrontFileLink)" :src="`${commonConfigs.domainFrontFileLink}/files/images/coupons/icon-yzs.png`" class="info-bg absolute" />
			<image v-if="item.status === 5 && (commonConfigs && commonConfigs.domainFrontFileLink)" :src="`${commonConfigs.domainFrontFileLink}/files/images/coupons/icon-zsz.png`" class="info-bg absolute" />
			
			<view class="info-detail flex-align-items-center flex-justify-content-between">
				<view class="detail-left">
					<view>{{ item.titile }}</view>
					<view class="info-title truncate">{{ item.subtitile }}</view>
					<view class="info-dates flex">
						<view>到期时间：{{ item.end_time }}</view>
						<view
						:class="['info-txt', tabCurrentIndex === 2 || item.status === 4 ? 'txt-timeout' : '']" 
						@click="setClickRuleFun(item.remarks)">规则 >></view>
					</view>
				</view>
				
				<view class="detail-right" v-if="confirmFlagPopup">
					<view class="info-price">
						<text style="font-size: 28rpx;">￥</text>
						<text>{{ item.discount }}</text>
					</view>
				</view>
				<view class="detail-right" v-else>
					<view
						:class="['info-price', tabCurrentIndex === 2 || item.status === 4 ? 'txt-timeout' : '']" >
						<text style="font-size: 28rpx;">￥</text>
						<text>{{ item.discount }}</text>
					</view>
					
					<!-- 兑换 -->
					<view class="oper-btns" :style="{
							'background-image': `url(${commonConfigs.domainFrontFileLink}/files/images/coupons/give-btn-bg.png)`
						}" v-if="tabCurrentIndex === 0" @click="setChangeFun(item)">
					</view>
					
					<!-- 去使用 -->
					<view class="oper-btns" :style="{
							'background-image': `url(${commonConfigs.domainFrontFileLink}/files/images/coupons/gotouse-btn-bg.png)`
						}" v-else-if="tabCurrentIndex === 1" @click="putUseFun(item)">
					</view>
					
					<!-- 已使用 -->
					<view class="oper-btns" :style="{
							'background-image': `url(${commonConfigs.domainFrontFileLink}/files/images/coupons/use-end-btn-bg.png)`
						}" v-else-if="item.status === 2">
					</view>
					
					<!-- 已过期 -->
					<view class="oper-btns" :style="{
							'background-image': `url(${commonConfigs.domainFrontFileLink}/files/images/coupons/out-btn-end-bg.png)`
						}" v-else-if="item.status === 3">
					</view>
					
					<!-- 已赠送 -->
					<view class="oper-btns" :style="{
							'background-image': `url(${commonConfigs.domainFrontFileLink}/files/images/coupons/gived-btn-end-bg.png)`
						}" v-if="item.status === 4">
					</view>
					
					<!-- 赠送中 -->
					<view class="oper-btns" :style="{
							'background-image': `url(${commonConfigs.domainFrontFileLink}/files/images/coupons/giving-btn-bg.png)`
						}" v-if="item.status === 5" @click="putUseFun(item)">
					</view>
					
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name: 'comCouponList',
		props: {
			resLists: Array,
			tabCurrentIndex: Number,
			confirmFlagPopup: {
				type: Boolean,
				default: () => false
			},
		},
		data() {
			return {};
		},
		computed:{
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			}
		},
		methods: {
			putUseFun(item) {
				this.$emit('putUseFun', item);
			},
			setChangeFun(item) {
				this.$emit('setChangeFun', item);
			},
			setClickRuleFun(content) {
				this.$emit('setClickRuleFun', content);
			},
		}
	};
</script>

<style lang="scss" scoped>
	.coupon-list-packbox {
		font-size: 22rpx;
		color: #666666;
		width: 100%;
		
		.coupon-info {
			width: 710rpx;
			height: 174rpx;
			padding: 22rpx 22rpx 16rpx 28rpx;
			margin: auto auto 28rpx auto;
			background-size: 100% 100%;
			
			&.coupon-info-popup {
				transform: scale(0.86);
			}
			
			.info-bg {
				top: 0rpx;
				left: 320rpx;
				width: 160rpx;
				height: 136rpx;
			}
			
			.info-detail {
				width: 100%;
				
				.detail-left {
					width: 68%;
					color: #FFFFFF;
					.info-title {
						font-size: 40rpx;
						color: #FFFFFF;
					}
					.info-dates {
						font-size: 20rpx;
						color: #FFFFFF;
						margin-top: 10rpx;
						.info-txt {
							margin-left: 24rpx;
							color: #63FFF7;
						}
						.txt-timeout {
							color: #999999;
						}
					}
				}
				
				.detail-right {
					// width: 32%;
					
					.info-price {
						font-size: 44rpx;
						font-weight: 600;
						color: #63FFF7;
						text-align: center;
						&.txt-timeout {
							color: #999999;
						}
					}
					.oper-btns {
						background-size: 100% 100%;
						width: 152rpx;
						height: 48rpx;
						margin: 0 auto;
						margin-top: 20rpx;
					}
				}
			}
		}
	}
</style>
